<!DOCTYPE html>
<html lang="en">
<head>

<title>Image View</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<style type="text/css">
body {
    padding:0px;
    margin: 0px;
}

.box{
    width: 70%;
    margin: 5px auto;
}
.img-box{
    width: 100%;
    position:relative;
    z-index:1;
    border: 0px solid #9e9e9e;
    
}
.img-box img{
    position:absolute;
    top:0;
    /* bottom:0; */
    left:0;
    right:0;
    width:100%;
    margin:auto;
    z-index: -1;
    *zoom:1;
    padding: 2px;
}
.img-box:before {
    content: "";
    display: inline-block;
    padding-bottom: 100%;
    width: 0.1px;
    vertical-align: middle;
}
</style>
</head>
<body>

<script>
var g_width = 80;
$(document).on('mousewheel DOMMouseScroll', onMouseScroll);
function getQueryParam(variable) {
    var query = window.location.search.substring(1);
    var pos = query.indexOf('=');
    
    if(pos != -1) {
    	return query.substring(pos + 1);
    }
    return '';
}

function onMouseScroll(e){
    if(!e.shiftKey) {
        return;
    }
    e.preventDefault();
    var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail;
    var delta = Math.max(-1, Math.min(1, wheel) );
    if(delta<0) {// down smaller
        zoomHandler(-8);
    } else {// up larger
        zoomHandler(8);
    }
    // show message to the custom option in parent window
   // parent.showCustomOptionMsg(g_width);
}
function scaleHandler(scaleValue) {
    g_width = scaleValue;
    zoomHandler(0); 
}

function autoSizeHandler() {
    g_width = 50;
    zoomHandler(0); 
}
function zoomHandler(scalePercentage, type) {
    var imageContainer = document.getElementById("imageContainer");
    var img = document.getElementById("naturalImg");
    img.style.width = "";
    img.style.height = "";
    if(type && type == 2) {
        // g_width initially is 50;
        var imgOffsetWidth = img.offsetWidth
        var nWidth = 100, nHeight = 100;
        if (img.naturalWidth) {
            nWidth = img.naturalWidth;
            nHeight = img.naturalHeight;
            img.style.width = nWidth + "px";
            img.style.height = nHeight + "px";

            var newWidth = (g_width*nWidth)/imgOffsetWidth;
            newWidth = Math.round(newWidth);
            g_width = newWidth;
            if(newWidth > 200) {
                newWidth = 200;
                g_width = 200;
            } else if(newWidth <8) {
                newWidth = 8;
                g_width = 8;
            }
            console.log("newWidth for Actual Size = " + newWidth);
            imageContainer.style.width= newWidth + "%";
        } else {
            img.style.width = nWidth + "%";
            img.style.height = nHeight + "%";
        }
    } else if(type && type == 3) {
        var imgOffsetWidth = img.offsetWidth;
        var newWidth = (g_width*document.body.offsetWidth)/imgOffsetWidth;
        newWidth = Math.round(newWidth);
        g_width = newWidth;
        if(newWidth > 200) {
            newWidth = 200;
            g_width = 200;
        } else if(newWidth <8) {
            newWidth = 8;
            g_width = 8;
        }
        console.log("newWidth for Page fit = " + newWidth);
        imageContainer.style.width= newWidth + "%";
    } else {
        var newWidth = g_width + scalePercentage;
        g_width = newWidth;
        if(newWidth > 200) {
            newWidth = 200;
            g_width = 200;
        } else if(newWidth <8) {
            newWidth = 8;
            g_width = 8;
        }
        console.log("newWidth = " + newWidth)
        imageContainer.style.width= (newWidth) + "%";
    }
}

$(document).ready(function () {
	var url = getQueryParam("path");
	url = decodeURI(url);
	$('#imgHolder').html("<img id='naturalImg' src='"+ url + "'/>")
	
});


</script>
<div id="imageContainer" class="box">
    <div id="imgHolder" class="img-box">
    
    </div>
</div>
</body>

</html>
